<template>
  <!-- // 用ref包裹完后，不用name.value，直接读取name，vue会自动加上.value。 -->
  <h1>{{person.name}}</h1>
  <h1>{{person.age}}</h1>
  <h1>{{person.job.type}}</h1>
  <h1>{{person.job.salary}}</h1>
  <h1>{{person.hobby}}</h1>
  <h1 v-show="person.sex">{{person.sex}}</h1>
  <button @click="say">say</button>
  <button @click="addSex">addSex</button>
  <button @click="deleteSex">deleteSex</button>
</template>

<script>
  import {reactive} from 'vue'
  export default {
    name: 'App',
    setup(){
      let person = reactive({
        name:"zhangsan",
        age:18,
        job :({
          type:"vue",
          salary:"30k",
        }),
        hobby :(['学习','看书'])
      })
      function say(){
        person.name ="wangwu"
        person.age = 99
        // 这个时候job是proxy对象，就不用.value了
        person.job.type="前端工程师"
        person.job.salary="60k"
        person.hobby[0]="教书"
      }
      function addSex(){
        person.sex = "男"
      }
      function deleteSex(){
        delete person.sex
      }
      const person2 = {
        name:"zhangsan",
        age:18,
      }
      // 默认代理
      // const p = new Proxy(person2,{})
      // Proxy是window.Proxy
      const p = new Proxy(person2,{
        get(target,propName){
          // console.log(a, b)
          return target[propName]
        },
        // 增加，更改 都能捕获到
        set(target,propName,value){
          target[propName] = value
        },
        deleteProperty(target,propName){
          delete target[propName]
        }
      })
      return {
        person,
        say,
        addSex,
        deleteSex,
      }
    },
  }
</script>
